<template>
    <l-layout  class="l-message-list" :top="36" :topMove="false" :bottom="44" :bottomMove="false" v-loading="loading">
        <template #top >
            <el-input v-model="keyword" size="small" placeholder="搜索：please enter关键词"  @keyup.enter.native="hanleSearch" clearable >
                <i slot="suffix" class="el-input__icon el-icon-search" @click="hanleSearch" />
            </el-input>
        </template>
        <div  class="l-rblock" style="overflow: auto;">
            <div class="l-message-list-wraper" v-for="item in messageList" :key="item.f_MsgId" >
                <div :title="item.f_Content" :class="['l-message-list-item',{'l-message-list-item-read':item.f_IsRead == 1}]" @click="handleOpenMsg(item)">
                    <el-avatar :size="36" style="background:#79bbff;"  :icon="getIcon(item.f_SendUserId)" class="l-message-list-avatar">
                    </el-avatar>
                    <div class="l-message-list-text">
                        <p class="title">{{item.f_Content}}</p>
                        <p class="msg">
                            {{getName(item.f_SendUserId)}}
                        </p>
                    </div>
                    <div class="l-message-list-time" >{{getTime(item.f_CreateDate)}}</div>
                </div>
            </div>
            
        </div>
        <div v-if="!loading &&  false" class="no-data" >
            <el-empty></el-empty>
        </div>
        <template #bottom >
            <div class="l-rblock l-message-list-bottom" >
                <el-button-group>
                    <el-button size="small" @click="handleClearMsg" > Clear消息</el-button>
                    <el-button size="small" @click="handleMore" >查看更多</el-button>
                </el-button-group>
            </div>
        </template>

        <component v-if="sysMessagereadly" ref="messageBox"  :is="sysMessageComponent"></component>
    </l-layout>
</template>

<script>
import { mapGetters } from "vuex"
export default {
    data () {
        return {
            loading:false,
            keyword:'',

            messageList:[],
            sysUserList:[],

            sysMessagereadly:false,
            sysMessageComponent:''
        }
    },
    created () {
        this.loadSysUsers()
    },
    computed: {
        ...mapGetters(["modules"]),
        msg(){
            return this.$store.state.message.msg.map
        },
    },
    props: [],
    methods: {
        async refresh(){
            // 刷新数据
            const queryData = {
                rows:100,
                page:1,
                sidx:'F_IsRead,F_CreateDate DESC',
                keyword:this.keyword,
                isDelete:0
            }
            const api = window.$api.message.msg
            const data = await this.$awaitWraper(api.getSysPage(queryData))
            this.messageList = data.rows
        },
        async loadSysUsers(){
             const api = window.$api.message.user
             this.sysUserList = await this.$awaitWraper(api.getList())
        },
        async hanleSearch(){
            if(!this.loading){
                this.loading = true
                await this.refresh()
                this.loading = false
            }
        },
        getIcon(code){
            const sysUser = this.sysUserList.find(t=>t.f_Code == code)
            if(sysUser){
                return sysUser.f_Icon
            }
            return ''
        },
        getName(code){
            const sysUser = this.sysUserList.find(t=>t.f_Code == code)
            if(sysUser){
                return sysUser.f_Name
            }
            return ''
        },
        getTime(time){
            const nowDate = this.$getDayTime('yyyy-MM-dd')
            const myDate = this.$formatDate(time,'yyyy-MM-dd')
            if(nowDate != myDate){
                return myDate
            }
            else{
                return this.$formatDate(time,'HH:mm:ss')
            }
        },
        
        async handleOpenMsg(item){
            this.sysMessagereadly = false
            const sysuser = this.sysUserList.find(t=>t.f_Code == item.f_SendUserId)
            if(sysuser && sysuser.f_Url){
                this.sysMessageComponent = sysuser.f_Url
                this.sysMessagereadly = true
                this.openMessageBox(item,0)  
            }
            item.f_IsRead = 1
            const api = window.$api.message.msg
            await this.$awaitWraper(api.read(item.f_MsgId))
            this.$store.dispatch('im/refreshSystemMsgNum')

        },
        openMessageBox(item,num){
            if(this.$refs.messageBox && this.$refs.messageBox.open){
                console.log(this.$refs.messageBox.open,this.sysMessageComponent,'messageBox')
                this.$nextTick(()=>{
                    this.$refs.messageBox.open(item)
                })
            }
            else if(num < 100){
                console.log(num)
                setTimeout(()=>{
                    num++
                    this.openMessageBox(item,num)    
                },100)
            }
        },

        handleClearMsg(){
            this.$confirm('是否 Clear消息列表?', 'Tips', {
                confirmButtonText: 'confirm',
                cancelButtonText: 'cancel',
                type: 'warning'
            }).then(async () => {
                this.messageList = []
                const api = window.$api.message.msg
                const res = await this.$awaitWraper(api.clear())
                if(res){
                    this.$store.dispatch('im/refreshSystemMsgNum')
                    this.$message({
                        type: 'success',
                        message: ' Clear成功!'
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已cancel Clear'
                })          
            })
        },
        handleMore(){
            const item = this.modules.find(t=>t.f_EnCode == 'learunmsg')
            if(item){
                this.$emit('close')
                this.$router.$lrRouter.goto(item)
            }
            else{
                this.$message({
                    type: 'error',
                    message: '找不到页面，请查看菜单配置!'
                })
            }
            
        }
    }
};
</script>

<style lang="scss">
.l-message-list{
    .el-input__inner {
        border-radius: 0 !important;
        border-right: none !important;
        border-left: none !important;
        border-top: none !important;
        
    }
    .el-input__icon {
        cursor: pointer;
    }
    .no-data{
        position:absolute;
        top:50%;
        margin-top: -160px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
    &-bottom{
        text-align: center;
        padding: 0 8px;
        .el-button{
            width: 152px;
        }
    }

    &-wraper{
        border-bottom: 1px solid #f5f7f9;
    }


    &-item{
        position: relative;
        padding: 7px 0 0 60px;
        background-color: #fff;
       
        height: 56px;
        cursor: pointer;
        transition: all .3s;
        &-read{
            opacity: .4; 
        }
        &:hover {
            background-color: #e6f7ff;
        }
    }



    &-avatar{
        position: absolute;
        top:10px;
        left: 16px;
    }

    &-text{
        margin-left: 8px;
        overflow: hidden;
        flex: 1;
        padding-top: 1px;

        .title {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 14px;
          color: #333;
          margin: 0;
          margin-bottom: 4px;
        }
        .msg {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin: 0;
            font-size: 12px;
            color: #999;
            padding-left: 8px;
        }
    }

    &-time{
        position: absolute;
        top:32px;
        right: 8px;
        font-size: 12px;
        color: #999;
    }
}
</style>
